import { ScrollView, View, Text, Image } from '@tarojs/components';
import React, { Component } from 'react';
import Taro, { getCurrentInstance } from '@tarojs/taro';
import { connect } from 'react-redux';
import './index.less';
import * as T from './types';
import actions from './actions';
import { store2Props } from './selectors';
import moment from 'dayjs';

const flowState = (status) => {
  if (status == 1) {//物业管理
    return '物业管理';
  } else if (status == 2) {//消防安全
    return '消防安全';
  } else if (status == 3) {//噪音扰民
    return '噪音扰民';
  } else if (status == 4) {//紧急事故
    return '紧急事故';
  } else {//其他
    return '其他';
  }
};

actions().actions.loadReducer();
// @ts-ignore
@connect<Partial<T.IProps>, any>(store2Props, actions)
export default class Index extends Component<Partial<T.IProps>, any> {
  constructor(props) {
    super(props);
    this.state = {
      detail: {}
    };
  }

  componentDidMount() {
    let detail = Taro.getStorageSync('complaintsDetail');
    this.setState({ detail })
  }

  componentDidShow() { }

  componentWillUnmount() {
    this.props.actions.clean();
  }

  imgRender(imgList) {
    const imgLists = [];
    const urls = []
    imgList.map((item, index) => {
      urls.push(item.imageUrl)
      imgLists.push(
        <View>
          <Image
            className="img"
            key={item.imageUrl}
            onClick={this.onImageClick.bind(this, item, urls)}
            src={item.imageUrl}
          />
        </View>,
      );
    });
    return imgLists;
  }

  onImageClick = (item, urls) => {
    this.previewImage(item.imageUrl, urls);
  }

  previewImage = (img, files) => {
    Taro.previewImage({
      current: img, // 当前显示图片的http链接
      urls: files, // 需要预览的图片http链接列表
    });
  };

  render() {
    let { detail } = this.state;
    return (
      <ScrollView className="packageAComplaintsDetail" scrollY>
        <View className='item_cont'>
          <Text className='item_name'>当前状态</Text>
          <Text className='item_name1' style={{ color: '#333' }}>{detail.status == 0 ? '未处理' : detail.status == 1 ? '处理中' : '已处理'}</Text>
        </View>
        <View className='item_cont'>
          <Text className='item_name'>问题类型</Text>
          <Text className='item_name1' style={{ color: '#333' }}>{flowState(detail.qesType)}</Text>
        </View>
        <View className='item_cont'>
          <Text className='item_name'>联系方式</Text>
          <Text className='item_name1'>{detail.secondPhone}</Text>
        </View>
        <View className='item_cont'>
          <Text className='item_name'>投诉时间</Text>
          <Text className='item_name1'>
            {moment(detail.createDate).format('YYYY-MM-DD')}
          </Text>
        </View>
        <View className='item_cont1'>
          <Text className='item_name'>描述情况</Text>
          <Text className='item_desc'>
            {detail.contnet}
          </Text>
        </View>
        {detail.qesImageUrl && JSON.parse(detail.qesImageUrl).length > 0 && (
          <View className='imgBox'>
            {this.imgRender(JSON.parse(detail.qesImageUrl))}
          </View>
        )}
      </ScrollView>
    );
  }
}
